<template>
	<view class="begin">
		<view class="header">
			<view class="num">{{tableData.name}}台球桌</view>
		</view>
		<view class="container" v-if="isOpen == 0 ">
			<view class="title">选择开台时长</view>
			<view class="cont">
				<view class="left">
					<view class="name">计时+押金</view>
					<view class="tips">(不满1小时按1小时计算,押金结账后自动退)</view>
				</view>
				<view class="right">
					<view class="num">¥<text>{{tableData.configVo[0].hourlyRate}}</text>/小时</view>
					<view class="cash">押金¥{{tableData.deposit}}</view>
				</view>
			</view>
		</view>
		<view class="container" v-if="isOpen == 1 ">
			<view class="openTime">此球桌已被占用</view>
		</view>
		<view class="container" v-if="isOpen == 2 ">
			<view class="title">已开台</view>
			<view class="openTime">{{tableData.openStageInfo.openTime}}</view>
			<view class="line"></view>
			<view class="info">
				<view class="userInfo">
					<image src="https://dingsheng-taiqiu.oss-cn-shenzhen.aliyuncs.com/20230203/1675391336497299.png"
						class="imgUrl"></image>
					<text>{{tableData.openStageInfo.nickName}}</text>
				</view>
				<view class="surplus">账户余额:{{surplus}}元</view>
			</view>
		</view>

		<button class="open" @click="open" v-if="isOpen != 1 ">{{isOpen == 0 ? '开台' : '结账关台'}}</button>
		<button class="pay" v-if="isOpen != 1 " @click="payMore">充值<text>有优惠</text></button>
		<view class="footerTips" v-if="isOpen != 1 ">先　充　值　　/　　后　消　费　　/　　更　划　算</view>

		<view class="popupBox" v-if="maskShow">
			<view class="mask" @click="maskShow = false"></view>
			<view class="popup">
				<view class="title">支付{{isOpen == 0 ? '押金' : '台费(押金自动返还)'}}</view>
				<view class="price" v-if="isOpen == 0">￥<text>{{tableData.deposit}}</text></view>
				<view class="price" v-if="isOpen == 2">
					￥<text>{{radioChecked == 0 ? recordNum.discount : recordNum.originalCost}}</text></view>
				<radio-group @change="radioChange">
					<view class="box">
						<text class="name">余额（账户余额:¥{{surplus}}）</text>
						<radio value="0" color="#E8232F" style="transform:scale(0.7)" checked />
					</view>
					<view class="box">
						<text class="name">微信</text>
						<radio value="1" color="#E8232F" style="transform:scale(0.7)" />
					</view>
				</radio-group>
				<button :disabled="radioChecked == 0 && payBtnStatus == 1"
					@click="wechatPay">{{ radioChecked ==1 ? '立即支付' : (radioChecked == 0 && payBtnStatus == 0) ? '立即支付' : '余额不足，立即充值'}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		openTab,
		getUserDetail,
		wechatPay,
		payStatus,
		getRecord,
		refund,
		delOrder
	} from "@/api/getData.js";
	export default {
		data() {
			return {
				radioChecked: 0,
				maskShow: false,
				tableId: null,
				payTableId: null,
				tableData: null,
				surplus: null,
				payBtnStatus: 0, //0-可以支付，1-余额不足
				isOpen: null, //0 - 正常开台， 1-被占用，2-结账
				recordNum: null
			}
		},
		onLoad(options) {
			this.tableId = options.tableId
			this.openTab()
			this.getUserDetail()
		},
		methods: {

			//充值列表
			payMore() {
				uni.navigateTo({
					url: "/pages/pay/payList?storeId=" + this.tableData.storeId + ""
				});
			},
			//用户详情
			async getUserDetail() {
				const {
					data: res
				} = await getUserDetail()
				this.surplus = res.data.surplus

			},
			//开台
			async openTab() {
				const {
					data: res
				} = await openTab(this.tableId)
				this.tableData = res.data
				this.tableId = res.data.deviceNo
				this.payTableId = res.data.tableId
				this.isOpen = res.data.isOpen
			},
			//
			open() {
				this.maskShow = true
				this.radioChecked = 0
				if (this.surplus < this.tableData.deposit) {
					this.payBtnStatus = 1
				} else {
					this.payBtnStatus = 0
				}
				if (this.isOpen == 2) {
					this.getRecord()
				}
			},
			//实时结算金额
			async getRecord() {
				const {
					data: res
				} = await getRecord(this.tableData.openStageInfo.tableRecordId)
				this.recordNum = res.data
				if (this.surplus < this.recordNum) {
					this.payBtnStatus = 1
				} else {
					this.payBtnStatus = 0
				}
			},
			radioChange(e) {
				this.radioChecked = e.detail.value
			},
			async wechatPay() {
				var _this = this
				const param = {
					orderType: this.isOpen == 0 ? 1 : 4,
					payType: this.radioChecked,
					tableId: this.payTableId,
					id: this.isOpen == 0 ? this.tableData.configVo[0].configId : this.tableData.openStageInfo
						.tableRecordId
				}
				const {
					data: res
				} = await wechatPay(param)
				if (res.data.isPay && this.radioChecked == 0) {
					if (this.isOpen == 0) {
						uni.$showMsg('开台成功', 1500, 'success')
						this.openTab()
						this.getUserDetail()
						this.maskShow = false
					} else {
						setTimeout(() => {
							this.refund()
						}, 3000)
						// setTimeout(this.refund(), 5000)

					}


				} else if (this.radioChecked == 1) {
					wx.requestPayment({
						timeStamp: res.data.start.timestamp,
						nonceStr: res.data.start.nonceStr,
						package: res.data.pay.packageStr,
						signType: res.data.pay.signType,
						paySign: res.data.pay.paySign,
						success(req) {
							console.log(req)
							_this.payStatus(res.data.paymentId, res.data.start.timestamp, res.data.start
								.nonceStr,
								res.data.pay.packageStr, res.data.pay.paySign)

						},
						fail(e) {
							console.log(e)
							_this.delOrder(res.data.paymentId)

						}
					})
				} else {
					uni.$showMsg(res.data.scheduleMsg, 1500, 'error')
				}
			},

			//支付结果上报
			async payStatus(paymentId, timeStamp, nonceStr, packages, paySign) {
				const param = {
					paymentId: paymentId,
					timeStamp: timeStamp,
					nonceStr: nonceStr,
					packageStr: packages,
					paySign: paySign,
				}
				const {
					data: res
				} = await payStatus(param)
				if (res.data) {
					if (this.isOpen == 0) {
						uni.$showMsg('开台成功', 1500, 'success')
						this.openTab()
						this.getUserDetail()
						this.maskShow = false
					} else {
						setTimeout(() => {
							this.refund()
						}, 3000)
						// setTimeout(this.refund(), 5000)
					}
				}

			},

			//退款
			async refund() {
				const {
					data: res
				} = await refund(this.tableData.openStageInfo.tableRecordId)
				this.openTab()
				this.getUserDetail()
				this.maskShow = false
				uni.$showMsg('关台成功', 1500, 'success')
			},
			//退款
			async delOrder(id) {
				const {
					data: res
				} = await delOrder(id)
			},
		}
	}
</script>

<style lang="less">
	.begin {
		.header {
			height: 217rpx;
			background: #E8232F;
			overflow: hidden;

			.num {
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				margin-top: 52rpx;
			}
		}

		.container {
			margin: -80rpx 32rpx 0;
			background: #fff;
			border-radius: 16rpx;
			padding: 32rpx;
			line-height: 1;

			.title {
				font-size: 32rpx;
			}

			.cont {
				display: flex;
				border: 1px solid #E2E2E2;
				border-radius: 16rpx;
				padding: 36rpx 32rpx;
				justify-content: space-between;
				margin-top: 32rpx;

				.left {
					.name {
						font-size: 24rpx;
						line-height: 42rpx;
					}

					.tips {
						font-size: 20rpx;
						color: #A4A4A4;
						margin-top: 17rpx;
					}
				}

				.right {
					.num {
						font-size: 20rpx;

						text {
							font-size: 42rpx;
						}
					}

					.cash {
						font-size: 20rpx;
						color: #E8232F;
						margin-top: 17rpx;
					}
				}
			}

			.openTime {
				font-size: 48rpx;
				font-weight: bold;
				text-align: center;
				margin: 40rpx 0;
			}

			.line {
				border-bottom: 2rpx dashed #E2E2E2;
			}

			.userInfo {
				display: flex;
				align-items: center;
				margin-top: 32rpx;
				margin-bottom: 46rpx;

				image {
					width: 88rpx;
					height: 88rpx;
					background: #FFEBF0;
					border-radius: 50%;
					margin-right: 27rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.surplus {
				font-size: 24rpx;
				color: #5B5B5B;
			}
		}

		.open,
		.pay {
			width: 476rpx;
			height: 98rpx;
			background: #E8232F;
			border-radius: 49rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 94rpx;
			padding: 0;
			box-sizing: border-box;
			border: 1px solid #E8232F;
			margin-top: 23rpx;
		}

		.open {
			margin-top: 86rpx;
		}

		.pay {
			background: #fff;
			color: #E8232F;
			position: relative;

			text {
				font-size: 20rpx;
				position: absolute;
				top: 22rpx;
				right: 100rpx;
				width: 105rpx;
				height: 34rpx;
				background: #E8232F;
				border-radius: 17rpx;
				color: #fff;
				line-height: 34rpx;
				text-align: center;
				display: block;
			}
		}

		.footerTips {
			margin-top: 117rpx;
			text-align: center;
			color: #A4A4A4;
			font-size: 20rpx;
		}

		.popupBox {
			.mask {
				width: 100%;
				height: 100%;
				background: #000;
				opacity: 0.5;
				position: fixed;
				left: 0;
				top: 0;
			}

			.popup {
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 0px 0px;
				z-index: 10;
				position: fixed;
				width: 100%;
				padding: 28rpx 64rpx;
				box-sizing: border-box;
				line-height: 1;
				left: 0;
				bottom: 0;

				.title {
					font-size: 36rpx;
					text-align: center;
				}

				.price {
					margin-top: 55rpx;
					font-size: 24rpx;
					color: #E8232F;
					text-align: center;

					text {
						font-size: 48rpx;
						font-weight: bold;
					}
				}

				.box {
					display: flex;
					justify-content: space-between;
					height: 88rpx;
					align-items: center;
				}

				.box:first-child {
					border-bottom: 1px solid #E2E2E2;
					margin-top: 80rpx;
				}

				button {
					margin-top: 220rpx;
					height: 98rpx;
					background: #E60012;
					border-radius: 49rpx;
					line-height: 98rpx;
					padding: 0;
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
